import { ListPage } from "custom/index";
import { getCustomerSubAccountPage } from './api'
import { editAccountDialog } from './dialog'
import LinkColumn from '@/components/table-column/LinkColumn.vue'
import { changeStatus } from './action'

const level1 = ['_index', 'customerName']
const level2 = ['platformName', 'shopName', 'shopGroup', 'shopTypeName', 'serviceShiftName', 'customTypeName', 'consultPeopleNum', 'conversionRate', 'responseSecond']
const level3 = ['accountName']
const spanMethod = ({ row, column }) => {
  if (level1.includes(column.property)) {
    return {
      rowspan: row.rowspan1,
      colspan: row.colspan1
    }
  } else if (level2.includes(column.property)) {
    return {
      rowspan: row.rowspan2,
      colspan: row.colspan2
    }
  } else if (level3.includes(column.property)) {
    return {
      rowspan: row.rowspan3,
      colspan: row.colspan3
    }
  }
}

const page = new ListPage('SubAccountManagement');

page
  .api(getCustomerSubAccountPage)
  .useSearch()
    .addInputItem('keyword', '子账号名称/ 客户名称/店铺名称')
    .addItem({ prop: 'customerName', label: '客户名称' })
    .addItem({ prop: 'accountName', label: '子账号名称' }) 
    .addItem({ prop: 'shopName', label: '店铺名称' })
    // .addItem({ prop: 'name', label: '客服姓名' })
    // .addItem({ prop: 'flowerName', label: '客服花名' })
    // .addItem({ prop: 'no', label: '客服工号' })
    // .addItem({ prop: 'mobile', label: '客服手机号' })
    // .addItem({ prop: 'groupNo', label: '客服编队' })
    // .addDatePicker({ prop: 'endDateS', label: '结束日期晚于' })
    .end()
  .useTable()
    .setProp('class', 'deep-border')
    .setProp('spanMethod', spanMethod)
    .useColumn({ prop: '_index', label: '#', align: 'center', width: 50, fixed: 'left' }).end()
    .useColumn('customerName').label('客户名称').minWidth(120).end()
    .useColumn('platformName').label('平台').end()
    .useCustomColumn(LinkColumn, { prop: 'shopName', linkProp: 'shopLinkUrl', linkType: 'link' }).label('店铺名称').minWidth(140).sortable().end()
    .useColumn('shopGroup').label('店铺分组').minWidth(140).end()
    .useColumn('customTypeName').label('客服类型').minWidth(140).end()
    


    .useColumn('shopTypeName').label('店铺类目').minWidth(140).end()
    .useColumn('serviceShiftName').label('班次').minWidth(160).end()
    
    .useColumn('consultPeopleNum').label('约定咨询量').minWidth(160).end()
    .useColumn('conversionRate').label('约定转化率').minWidth(160).end()
    .useColumn('responseSecond').label('约定响应时间').minWidth(160).end()

    .useColumn('accountName').label('子账号名称').minWidth(160).end()
    .useColumn('accountPassword').label('子账号密码').end()
    
    .useColumn('createUserName').label('创建人').minWidth(140).sortable().end()
    .useColumn('createTime').label('创建时间').minWidth(180).sortable().end()
    .end()
  .usePagination()
    .end()
  .useAuthButton()
    // .useItem('add').primary().content('新增').addRow(addDialog).end()
    .useItem('export').content('导出数据').exportExcel().end()
    .end()
  // .useAuthColumn({ width: 100 })
  //   .useItem('add').content('添加子账号').editRow(addSubAccountDialog).end()
  //   .end()
  .useAuthColumn({ width: 110 })
    // .useItem('dispatch').content('分配客服').editRow(dispatchAccountDialog).end()
    .useItem('edit').content('编辑').editRow(editAccountDialog).end()
    // .useItem('dispatch').content('分配公司').editRow(dispatchCompanyDialog).end()
    .useItem('stop').formatter(row => row.status === 1 ? '停用' : '启用').action(changeStatus).end()

export default page
